<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>视频管理</title>
    <div th:replace="fragment/header::css"></div>
    <div th:replace="fragment/header::js"></div>
</head>
<div th:replace="fragment/script::contextPath"></div>
<body ><!--th:style="|background: url(@{/image/admin/adminBackground.png})|"-->
<div class="layui-layout layui-layout-admin site-demo-fixed" >
  <div th:replace="fragment/nav::nav"></div>
  <nav class="navbar navbar-light ">
    <div class="container-fluid justify-content-center" >
      <form class="form-inline" th:action="@{/admin/adminManageVideo}" method="get">
        <input name="keyWord"  class="form-control mr-sm-2" style="width: 600px" type="search" placeholder="按视频标题搜索" aria-label="Search" th:value="${#request.getParameter('keyWord')}">
        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <div class="container" style="width: auto">
    <table class="table table-bordered">
      <thead>
      <tr>
<!--        <th scope="col" style="text-align: center">视频序号</th>-->
        <th scope="col" style="text-align: center" width="300px">视频标题</th>
        <th scope="col" style="text-align: center"  width="150px">时长</th>
        <th scope="col" style="text-align: center">作者</th>
        <th scope="col" style="text-align: center">类别</th>
        <th scope="col" style="text-align: center">点赞数</th>
        <th scope="col" style="text-align: center">状态</th>
        <th scope="col" style="text-align: center">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr style="text-align: center" th:each="media:${mediaList}">
<!--        <th scope="row" th:text="${media.get('mediaId')}"></th>-->
        <td th:text="${media.get('mediaName')}"></td>
        <td th:text="${#dates.format(media.get('mediaDuration'),'HH:mm:ss')}"></td>
        <td th:text="${media.get('userName')}"></td>
        <td th:text="${media.get('mediaCategory')}"></td>
        <td th:text="${media.get('mediaLike')}"></td>
        <td th:switch="${media.get('mediaStatus')}">
          <span th:case="0">删除</span>
          <span th:case="1">待审核</span>
          <span th:case="2">审核通过</span>
          <span th:case="3">审核不通过</span>
          <span th:case="4">锁定</span>
        </td>
        <td width="250px">
          <button type="button" class="btn btn-outline-primary btn-sm" th:onclick = "editMediaInfo([[${media.get('mediaId')}]],[[${media.get('mediaName')}]],[[${media.get('mediaIntro')}]],[[${media.get('categoryId')}]],[[${media.get('mediaType')}]])">编辑</button>
          <button type="button" class="btn btn-outline-warning btn-sm" th:onclick = "banMediaInfo([[${media.get('mediaId')}]],[[${media.get('mediaStatus')}]])" th:if="${media.get('mediaStatus')!=4}">锁定</button>
          <button type="button" class="btn btn-outline-danger btn-sm" th:onclick = "delMediaInfo([[${media.get('mediaId')}]],[[${media.get('mediaStatus')}]])">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
<!-- Modal 编辑信息-->
<div class="modal fade" id="editUser" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form th:action="@{/admin/adminEditMedia}" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">编辑视频信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="mediaId" id="mediaId">
                    <div class="form-group">
                        <label for="mediaName">视频标题</label>
                        <input type="text" class="form-control" id="mediaName" name="mediaName">
                    </div>
                    <div class="form-group">
                        <label for="mediaIntro">视频简介</label>
                        <textarea type="text" class="form-control" id="mediaIntro" name="mediaIntro"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="categoryId">类别</label>
                        <select class="form-control" id="categoryId" name="categoryId">
                            <option th:each="category:${categoryList}" th:value="${category.categoryId}" th:text="${category.categoryName}"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="mediaType">视频类型</label>
                        <select  class="form-control" id="mediaType" name="mediaType">
                            <option value="0">视频</option>
                            <option value="1">电影</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" >提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>

<script>
function editMediaInfo(mediaId,mediaName,mediaIntro,categoryId,mediaType){
    $("#mediaId").val(mediaId);
    $("#mediaName").val(mediaName);
    $("#mediaIntro").val(mediaIntro);
    $("#categoryId").val(categoryId);
    $("#mediaType").val(mediaType);
    $("#editUser").modal('show');
}

function banMediaInfo(mediaId,mediaStatus){
    if (mediaStatus!==4){
        $.post(contextPath+"/admin/adminBanMedia",{mediaId,mediaStatus:4},function () {
            window.location.reload();
            alert("操作成功");
        })
    }
}
function delMediaInfo(mediaId,mediaStatus){
    if (mediaStatus!==0){
        $.post(contextPath+"/admin/adminDelMedia",{mediaId,mediaStatus:0},function () {
            window.location.reload();
            alert("操作成功");
        })
    }
}
</script>